<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <title>优惠券展示 - 金拱门风格</title>
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', sans-serif;
            background-color: #fff;
            color: #333;
        }

        .header {
            background-color: #FFBC0D;
            color: white;
            text-align: center;
            padding: 1rem;
            font-size: 1.5rem;
        }

        .category-bar {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            padding: 1rem 2rem;
            background-color: #f9f9f9;
            border-bottom: 1px solid #eee;
        }

        .category-button {
            padding: 0.5rem 1rem;
            border: 1px solid #FFBC0D;
            background-color: white;
            color: #FFBC0D;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.95rem;
            transition: all 0.2s ease;
        }

        .category-button:hover,
        .category-button.active {
            background-color: #FFBC0D;
            color: white;
        }

        .coupon-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            padding: 2rem;
            list-style: none;
        }

        .coupon-card {
            border: 1px solid #eee;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            background-color: #fff;
            transition: transform 0.2s ease;
        }

        .coupon-card:hover {
            transform: translateY(-5px);
        }

        .coupon-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }

        .coupon-info {
            padding: 1rem;
            text-align: center;
        }

        .coupon-name {
            font-size: 1.1rem;
            margin: 0.5rem 0;
            color: #222;
        }

        .coupon-price {
            color: #FFBC0D;
            font-weight: bold;
        }

        .coupon-type,
        .coupon-time,
        .coupon-days {
            font-size: 0.9rem;
            color: #666;
            margin: 0.2rem 0;
        }

        .receive-button {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background-color: #FFBC0D;
            border: none;
            color: white;
            border-radius: 5px;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .receive-button:hover {
            background-color: #e0a800;
        }
    </style>
</head>
<body>
<header class="header">
    <h1>优惠券</h1>
</header>
<div id="app">
    <!-- 分类选择按钮 -->
    <nav class="category-bar">
        <button
                class="category-button"
                @click="getAllCoupones"
                :class="{ active: currentCategory === '全部' }"
        >
            全部
        </button>
        <span v-for="(type, index) in typeList" :key="index">
            <button
                    class="category-button"
                    @click="getByType(type)"
                    :class="{ active: currentCategory === type }"
            >
                {{ type }}
            </button>
        </span>
    </nav>

    <!-- 优惠券展示 -->
    <ul class="coupon-container">
        <li v-for="(coupon,index) in couponList" :key="index">
            <a href="#">
                <div class="coupon-card">
                    <img src="images/default.jpg" alt="优惠券图片" class="coupon-image" />
                    <div class="coupon-info">
                        <div class="coupon-name">{{ coupon.couponName }}</div>
                        <div class="coupon-type">类型: {{ coupon.couponType }}</div>
                        <div class="coupon-price">优惠价格: ¥{{ coupon.couponPrice }}</div>
                        <div class="coupon-time">
                            有效时间: {{ coupon.couponStartTime }} - {{ coupon.couponEndTime }}
                        </div>
                        <div class="coupon-days">
                            有效天数: {{ coupon.couponValidDays }} 天
                        </div>
                        <button class="receive-button" @click="receiveCoupon(coupon)">
                            领取
                        </button>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            typeList: [],
            couponList: [],
            currentCategory: '全部'
        },
        mounted() {
            this.getAllTypes();
            this.getAllCoupones();
        },
        methods: {
            // 获取所有分类名称
            getAllTypes() {
                axios.get("/kfc/coupon/type")
                    .then(response => {
                        this.typeList = response.data.data;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },

            // 获取所有优惠券
            getAllCoupones() {
                this.currentCategory = '全部';
                axios.get("coupon")
                    .then(response => {
                        this.couponList = response.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },

            // 根据类型获取优惠券
            getByType(typeName) {
                console.log("type:" + typeName)
                this.currentCategory = typeName;
                var url = "coupon/type/" + typeName //
                axios.get(url)
                    .then(response => {
                        this.couponList = response.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            // 领取按钮
            receiveCoupon(coupon) {
                // 手动附加 custId与status 字段
                const myCoupon = {
                    custId: 1,//cust暂定为1
                    couponStartTime: coupon.couponStartTime,
                    couponEndTime:coupon.couponEndTime,
                    couponId:coupon.couponId,
                    other1:coupon.couponName,
                    other2:coupon.couponPrice
                };


                axios.post("/kfc/mycoupon", myCoupon)
                    .then(response => {
                        if (response.data.code === 200) {
                            alert("领取成功！");
                        } else {
                            alert("领取失败：" + response.data.msg);
                        }
                    })
                    .catch(error => {
                        alert("领取失败！");
                        console.error(error);
                    });
            }



        }
    });
</script>
</body>
</html>
